<template>
  <div class="app-container">

    <h3>系统总览</h3>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div class="stat-tt">总客户数</div>
          <div class="stat-num"> <countTo :start-val="0" :end-val="statTotal.totalNum" :duration="2000" /></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-tt">本月新增客户数</div>
          <div class="stat-num"> <countTo :start-val="0" :end-val="statTotal.monthNewNum" :duration="2000" /></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-tt">本月新增联系记录</div>
          <div class="stat-num"> <countTo :start-val="0" :end-val="statTotal.monthContactNum" :duration="2000" /></div>
        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <h3>客户动态</h3>
        <el-card style="height: 444px">

          <el-table
            :data="dynamicList"
            style="width: 100%"
          >



            <el-table-column
              label="客户名称"
              show-overflow-tooltip>

              <template slot-scope="scope">
                <router-link class="router-link" :to="{name: 'CustomerUpdate', params:{id: scope.row.customerId}}">
                  {{scope.row.customerId_dictText}}
                </router-link>
              </template>

            </el-table-column>

            <el-table-column
              label="客户经理"
              prop="createBy_dictText"
              width="80px"
            />

            <el-table-column
              label="操作时间"
              prop="createTime"
              width="120px"
            >

              <template slot-scope="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>

            </el-table-column>

            <el-table-column
              label="动态"
              show-overflow-tooltip
              prop="content"
            />

            <el-table-column
              align="center"
              width="50px"
              label="心情"
            >

              <template slot-scope="scope">
                <span v-if="scope.row.mood===1">😀</span>
                <span v-else>😩</span>
              </template>

            </el-table-column>
          </el-table>

          <div style="text-align: center; margin-top: 25px">
            <el-link v-if="dynamicMore" type="primary" href="/#/admin/customer/dynamic">查看更多动态..</el-link>
          </div>

        </el-card>
      </el-col>

      <el-col :span="12">
        <h3>统计视图</h3>
        <el-card>
          <level-chart id="chart1" title="级别统计" width="100%" height="400px" />
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'
import LevelChart from '@/views/dashboard/components/LevelChart'
import { apiDynamicPaging } from '@/api/customer/dynamic'
import { apiCustomerStatTotal } from '@/api/stat/customer'
import Moment from 'moment'
export default {
  components: { LevelChart, countTo },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  data() {
    return {
      dynamicMore: false,
      dynamicList: [],
      statTotal: {}
    }
  },

  created() {
    apiDynamicPaging({ current: 1, size: 7 }).then(res => {
      this.dynamicList = res.data.records
      if (res.data.pages > 1) {
        this.dynamicMore = true
      }
    })

    apiCustomerStatTotal({}).then(res => {
      this.statTotal = res.data
    })
  },

  methods: {
    formatDate(val) {
      return Moment(val).format('MM/DD HH:mm')
    }
  }
}
</script>

<style>
.stat-tt{
  font-size: 18px;
  text-align: left;
}

.stat-num{
  font-size: 32px;
  font-weight: 700;
  text-align: left;
  line-height: 50px;
  color: #157FE1;
}
</style>
